<script setup>
import { ref } from 'vue'
import { onLaunch, onShow, onLoad } from '@dcloudio/uni-app'

//引入store
import { useMemberStore } from '@/store'
const memberStore = useMemberStore()

//请求数据初始化页面
const loginData = ref({
  account: '13123456789',
  password: '123456',
})
const handleLogin = async () => {
  await memberStore.login(loginData.value)
  uni.reLaunch({
    url: '/pages/index/index',
  })
}
</script>

<template>
  <view class="login-container">
    <view class="logo">
      <image src="/static/logo.png" mode="aspectFit" />
    </view>
    <view class="form">
      <view class="input-group">
        <input
          v-model="loginData.account"
          placeholder="请输入手机号"
          type="number"
        />
      </view>
      <view class="input-group">
        <input
          v-model="loginData.password"
          placeholder="请输入密码"
          type="password"
        />
      </view>
      <button class="login-btn" @tap="handleLogin">登录</button>
      <view class="register-tip">
        没有账号？<text class="register-link">立即注册</text>
      </view>
    </view>
  </view>
</template>

<style lang="scss">
.login-container {
  padding: 40rpx;
  .logo {
    text-align: center;
    margin-bottom: 60rpx;
    image {
      width: 200rpx;
      height: 200rpx;
    }
  }
  .form {
    .input-group {
      margin-bottom: 40rpx;
      input {
        width: 100%;
        height: 80rpx;
        padding: 0 20rpx;
        border: 1rpx solid #ddd;
        border-radius: 10rpx;
      }
    }
    .login-btn {
      width: 100%;
      height: 80rpx;
      line-height: 80rpx;
      background-color: #27ba9b;
      color: #fff;
      border-radius: 10rpx;
      margin-bottom: 20rpx;
    }
    .register-tip {
      text-align: center;
      color: #666;
      .register-link {
        color: #27ba9b;
      }
    }
  }
}
</style>
